<!DOCTYPE html>
<html lang="en" xmlns:th="http:www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>物流公司信息管理</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
        .lan{
            width: 300px;
        }
    </style>
</head>
<body>
<div id="app">
    <span>物流公司名称:</span><el-input v-model="input1" placeholder="请输物流公司的名称" class="lan"></el-input>
     <el-button icon="el-icon-search" type="primary" @click="selectOne">查询</el-button><br>
    <br>
    <el-button type="warning" icon="el-icon-circle-plus-outline" @click="dialogFormVisible = true">添加物流公司</el-button>
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                label="物流公司编号"
        >
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.logisticsId }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="物流公司名称"
        >
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.logisticsName }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="负责人"
        >
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.principal }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="联系方式"
        >
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.logisticsContact }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="运量区域"
        >
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.area }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="加入时间"
        >
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.joinTime }}</span>
            </template>
        </el-table-column>


        <el-table-column
                label="价格"
        >
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.price }}</span>
            </template>
        </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-edit-outline"
                        @click="handleEdit(scope.$index, scope.row)"></el-button>
                <el-button
                        size="mini"
                        type="warning"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.$index, scope.row)"></el-button>
            </template>
        </el-table-column>
    </el-table>
  <!--  &lt;!&ndash;分页&ndash;&gt;
    <el-pagination
            background
            layout="prev,pager,next"
            @current-change="loadPage"
            :total="total"
            :current-page="curr"
            :page-size="pageSize">
    </el-pagination>-->

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="curr"
            :page-sizes="[5,10,15,20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog title="信息管理操作" :visible.sync="dialogFormVisible" @close="closeMyDialog">
        <el-form :model="logistics">
            <el-form-item label="公司名称" :label-width="formLabelWidth">
                <el-input v-model="logistics.logisticsName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="负责人" :label-width="formLabelWidth">
                <el-input v-model="logistics.principal" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" :label-width="formLabelWidth">
                <el-input v-model="logistics.logisticsContact" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="运营区域" :label-width="formLabelWidth">
                <el-input v-model="logistics.area" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="价格(元/每吨)" :label-width="formLabelWidth">
                <el-input v-model="logistics.price" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="logistics.remarks">
                </el-input>
            <!-- <el-input v-model="logistics.remarks" autocomplete="off"></el-input>-->
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveRoles">确 定</el-button>
        </div>
    </el-dialog>

</div>

<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                tableData:[],
                curr:1,
                total:0,
                input1:"",
                pageSize:5,
                dialogFormVisible:false,//控制对话框显示
                formLabelWidth: '120px', //表单标签的宽度
                logistics:{
                    logisticsId:"",
                    logisticsName:"",
                    principal:"",
                    logisticsContact:"",
                    area:"",
                    joinTime:"",
                    price:"",
                    remarks:"",
                    createId:"",
                    createTime:"",
                    updateId:"",
                    updateTime:"",
                    companyId:"",
                },

            }
        },
        //函数定义区域
        methods:{
            selectOne(row){
               this.loadPage(this.curr,this.pageSize)
            },

            handleSizeChange(pageSize) {
                console.log(`每页 ${pageSize} 条`);
                this.loadPage(this.curr,pageSize)
            },
            handleCurrentChange(curr) {
                console.log(`当前页: ${curr}`);
                this.loadPage(curr,this.pageSize)
            },
            handleEdit(index, row) {
                console.log(index, row);
                this.logistics=row;
                this.dialogFormVisible=true;
            },
            handleDelete(index, row) {
                console.log(index, row);
                var id= row.logisticsId
                if(confirm("您确定要删除吗")){
                    axios.delete("/logistics/"+id).then(value => {
                        if(value.data.code==1&&this.total-((this.curr-1)*this.pageSize)==1){
                            this.loadPage(this.curr-1,this.pageSize)
                        }else {
                            this.loadPage(this.curr,this.pageSize)
                        }

                    })
                }
            },

            loadPage(curr,pageSize){
                this.curr=curr;
                this.pageSize=pageSize
                if(this.input1==''){
                    axios.get("/logistics?current="+curr+"&pageSize="+pageSize).then(value => {
                        if(value.data.code==1){
                            this.tableData=value.data.data.records;
                            this.curr=value.data.data.current;
                            this.pageSize=value.data.data.size;
                            this.total=value.data.data.total;
                        }
                    })
                }else {
                    axios.get("/logistic?username="+this.input1+"&curr="+this.curr+"&pageSize="+this.pageSize).then(value => {
                        if(value.data.code==1){
                            this.tableData=value.data.data.records;
                            this.curr=value.data.data.current;
                            this.pageSize=value.data.data.size;
                            this.total=value.data.data.total;
                        }
                    })
                }

            },
            //关闭对话框
            closeMyDialog(){
                //清空数据
                this.logistics={
                    logisticsId:"",
                    logisticsName:"",
                    principal:"",
                    logisticsContact:"",
                    area:"",
                    joinTime:"",
                    price:"",
                    remarks:"",
                    createId:"",
                    createTime:"",
                    updateId:"",
                    updateTime:"",
                    companyId:"",
                }
            },
            //保存用户的方法
            saveRoles(){
                if(this.logistics.logisticsId=='') {
                    axios.post("/logistics", this.logistics).then(value => {
                        if (value.data.code == 1) {
                            this.loadPage(Math.ceil((this.total+1)/this.pageSize),this.pageSize)
                        }
                    })
                }else {
                    axios.put("/logistics", this.logistics).then(value => {
                        if (value.data.code == 1) {
                            this.loadPage(this.curr,this.pageSize)
                        }
                    })
                }
                this.dialogFormVisible= false;
            },

        },
        //页面加载成功回调
        mounted(){
            //查询所有的用户分页
            this.loadPage(1,5)
        }
    })
</script>
</body>
</html>